<template>
  <div class="demo5-wrap">
    <p>{{ person }}</p>
    <h1>姓名：{{ name }}</h1>
    <h1>年龄：{{ age }}</h1>
    <h1>薪水：{{ salary }}K</h1>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">修改年龄</button>
    <button @click="salary++">涨薪</button>
  </div>
</template>

<script>
import { reactive, toRef } from 'vue';

export default {
  name: 'Demo5',
  setup() {
    // 数据
    const person = reactive({
      name: '张三',
      age: 20,
      job: {
        j1: {
          salary: 20
        }
      }
    });

    return {
      person,
      name: toRef(person, 'name'),
      age: toRef(person, 'age'),
      salary: toRef(person.job.j1, 'salary')
    };
  }
};
</script>

<style lang="scss" scoped>
.demo5-wrap {
  & > p {
    margin-bottom: 20px;
  }
  & > h1 {
    margin-bottom: 20px;
  }
  & > button {
    margin-right: 20px;
    cursor: pointer;
  }
}
</style>
